<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-10-27 13:07:28
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2022-11-25 17:28:31
 * @FilePath: \grazlink20\uc_sys\src\components\Lee\Table\src\LeeTable2.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
 * 通用列表查询2（不用Table组件，用ElTable）
-->
<script setup lang="ts">
import { ref, PropType } from 'vue'
import { ElTable, ElTableColumn, ElRadio, ElImage } from 'element-plus'
const props = defineProps({
  // 数据
  data: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  // 结构（JSON）
  schema: {
    type: Array as PropType<any>,
    default: () => []
  },
  isSelection: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  selectionRadio: {
    type: Boolean as PropType<boolean>,
    default: false
  }
})

// 字典通过value获取label
const getDictLabel = (dictData, value) => {
  let data = dictData.find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}
const radio = ref('')
const multipleSelection = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}
// 获取选择
const getSelect = () => {
  if (props.selectionRadio) {
    // 如果是单选
    return props.data[radio.value]
  } else {
    return multipleSelection.value
  }
}
defineExpose({
  getSelect
})
</script>

<template>
  <ElTable :data="props.data" style="width: 100%" @selection-change="handleSelectionChange">
    <!-- @current-change="handleCurrentChange" -->
    <template v-if="isSelection">
      <ElTableColumn v-if="props.selectionRadio" width="36">
        <template #default="scope">
          <ElRadio :label="scope.$index" v-model="radio" class="leeRadio" />
        </template>
      </ElTableColumn>
      <ElTableColumn v-else type="selection" width="55" />
    </template>
    <ElTableColumn
      v-for="(item, index) in schema"
      :key="index"
      v-bind="item"
      :property="item.field"
    >
      <template v-if="item.component == 'Dict'" #default="scope">
        {{ getDictLabel(item.componentProps.options, scope.row[item.field]) }}
      </template>
      <template v-else-if="item.component == 'Image'" #default="scope">
        <ElImage :src="scope.row[item.field]" v-bind="item.componentProps" />
      </template>
    </ElTableColumn>
  </ElTable>
</template>
<style scoped>
.leeRadio :deep(.el-radio__label) {
  display: none;
}
</style>
